<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>重置密码</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/gloabl.css">
    <link rel="stylesheet" href="/css/footer.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/gloab.js"></script>
    <style>
        main {
            background: #eeeeee;
            width: 100%;
            height: 89%;
            padding: 0;
        }

        .container {
            padding: 10px 30px;
            margin: 0 5%;
            height: 100%;
        }

        .container div {
            height: 98%;
        }

        .resetForm {
            width: 600px;
            height: 100%;
            margin: 0 auto;
            padding: 20px 0px;
        }

    </style>
</head>
<body>
<#include "include/header.ftl">
<main id="main">
    <div class="container">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="resetForm">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" required lay-verify="required" placeholder="用户名"
                                       autocomplete="off" class="layui-input layui-disabled"
                                       value="${Session.user.username!}"
                                       disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">原密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="oldpwd" required lay-verify="required" placeholder="原密码"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">新密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="newpwd" required lay-verify="pass" placeholder="新密码"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="renewpwd" required lay-verify="repass" placeholder="确认密码"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="data-form" id="formSub">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary" id="formRet">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
<#include "include/footer.ftl">
</body>
<script type="text/javascript">
    layui.use(['layer', 'element', 'form'], function () {
        const layer = layui.layer;
        const element = layui.element;
        const form = layui.form;
        const $ = layui.$;

        form.verify({
            pass: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value === null || value.length <= 0) {
                    return '必填项不能为空';
                }
                if (value.indexOf(" ") >= 0) {
                    return '密码中不能出现空格';
                }
            },

            repass: function (value, item) {
                if (value === null || value.length <= 0) {
                    return '必填项不能为空';
                }
                if (value.indexOf(" ") >= 0) {
                    return '密码中不能出现空格';
                }
                let newpwd = $("input[name='newpwd']").val();
                console.log(newpwd, value);
                if (newpwd !== value) {
                    return '两次密码输入不一致';
                }
            }
        });

        form.on('submit(data-form)', function (data) {
            console.log(JSON.stringify(data.field));
            fetch("/resetpwd.do", {
                method: 'POST',
                body: JSON.stringify(data.field)
            }).then(res => res.json()).then(json => {
                if (json.code !== 0) return layer.msg('修改失败', {icon: 5})
                layer.msg('修改成功，页面即将跳转', {icon: 6});
                setTimeout(function () {
                    window.location.href = "/index.html";
                }, 1000);
            }).catch(err => {
                console.log("err", err);
                layer.msg('请求异常', {icon: 5})
            })

            return false;
        });
    })
</script>
</html>